<template>
  <div class="login">
    <div class="bg">
    </div>
    <Modal class="login-modal" v-model="loginModal" width="360" :closable="false" :mask-closable="false">
      <div>
        <h2 style="margin:10px;color:#abcdef;text-align:center">
          <!-- <img :src="require('@/assets/img/logo.png')" alt="" height="50"> -->
          登陆
          </h2>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
          <Form-item prop="name">
            <Input type="text" v-model="formValidate.name" placeholder="账号">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Form-item prop="pwd">
            <Input type="password" v-model="formValidate.pwd" placeholder="密码">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Form-item prop="captcha" style="margin-bottom: 0px;">
            <Row>
              <Col :span="10">
              <Input type="text" v-model="formValidate.captcha" placeholder="验证码" @on-enter="handleSubmit('formValidate')">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
              </Col>
              <Col :span="14">
              <a href="javascript:;" @click.prevent="resetCpt">
                <img :src="captchaUrl" />
              </a>
              </Col>
            </Row>
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" long :loading="modal_loading" @click="handleSubmit('formValidate')">登录
        </Button>
        <small style="text-align: center;display:block" class="subText">@copyright by 兰州启源信息技术服务有限公司</small>
      </div>
    </Modal>
  </div>
</template>

<script>
import { SERVER_CPT_URL } from '@/api/config'
//  import { getStore} from'@/common/utils'
export default {
  name: 'login',
  data() {
    return {
      loginModal: true,
      modal_loading: false,
      captchaUrl: '',
      formValidate: {
        name: '',
        pwd: '',
        captcha: '',
        captchaid: '',
        remember: []
      },
      ruleValidate: {
        name: [{
          required: true,
          message: '请填写用户名',
          trigger: 'blur'
        }],
        pwd: [{
          required: true,
          message: '请填写密码',
          trigger: 'blur'
        },
        {
          type: 'string',
          min: 6,
          message: '密码长度不能小于6位',
          trigger: 'blur'
        }
        ],
        captcha: [{
          required: true,
          message: '请填写验证码',
          trigger: 'blur'
        },
        {
          type: 'string',
          min: 6,
          max: 6,
          message: '长度6位',
          trigger: 'blur'
        }
        ]

      }
    }
  },
  methods: {
    handleSubmit(name) { // login
      this.$refs[name].validate((valid) => {
        this.modal_loading = true
        setTimeout(() => {
          this.modal_loading = false
          this.getCpt()
          if (valid) {
            this.$api.login(this.formValidate).then((res) => {
              console.log(res)
              if (!res.error) {
                this.$Message.success('登录成功!')
                this.$store.commit('SET_TOKEN',res.token)
                this.$router.push('/')
              } else {
                this.$Message.error(res.message)
              }
            })
          } else {
            this.$Message.error('表单验证失败!')
            this.$Notice.warning({
              title: '登录提示',
              desc: '用户名/密码 随意输入...'
            })
          }
        }, 2000)
      })
    },
    toRegister() {
      this.$router.push('/register')
    },
    getCpt(params) {
      this.$api.getCpt(params).then((res) => {
        if (!res.error) {
          this.formValidate.captchaid = res.cptId
          this.captchaUrl = SERVER_CPT_URL + res.url
        } else {
          this.$Message.error(res.msg)
        }
      })
    },
    resetCpt() {
      this.captchaUrl = this.captchaUrl + "?reload"
    }

  },
  mounted() {
    // this.SET_HEADERNEED(false)
    // this.SET_MENUNEED(false)
    // this.SET_ISLOGINPAGE(true)
    this.getCpt()
  },
}
</script>


